<template>
  <div class="task">
    <div class="title">
      <a href="javascript:void(0);" @click="showDetail()" class="title">{{ task.title }} </a>
    </div>
    <div>
      悬赏金额： <span style="color:#ff4c4c;"> {{ formatReward(task.reward) }} </span> Nas
    </div>
    <div>
      悬赏状态：{{ getTaskStatus(task.finished) }}
    </div>
    <div>
      创建日期：{{ formatTime(task.timestamp) }}
    </div>
    <div>
      创建人：<a v-bind:href="explorer + 'address/' + task.from" target="_blank">{{ task.from }}</a>
    </div>
    <div v-show="task.finished != '0'">
      领取人：<a v-bind:href="explorer + 'address/' + task.to" target="_blank">{{ task.to }}</a>
    </div>
    <div class="content">
      {{ task.content }}
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import util from '../util';
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";

  export default {
    components: {ElButton},
    name: 'TaskItem',
    props: {
      task: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        explorer: util.config.explorer
      }
    },
    methods: {
      showDetail(s) {
        this.$emit('showdetail', this.task);
      },
      getTaskStatus(val) {
        if (val == '0') {
          return '进行中';
        }
        else {
          return '已完成';
        }
      },
      formatReward(r) {
        return util.nebulas.Unit.fromBasic(r, 'nas').toString();
      },
      formatTime(t) {
        var date = new Date(t*1000);
        var hours = "0" + date.getHours();
        var minutes = "0" + date.getMinutes();
        var seconds = "0" + date.getSeconds();
        var year = date.getFullYear();
        var month = "0" + date.getMonth();
        var day = "0" + date.getDate();
        var formattedTime =  year + '-' + month.substr(-2) + '-' + day.substr(-2) + ' ' + hours.substr(-2) + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        return formattedTime;
      }
    }
  };
</script>

<style>
  .task {
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
  }
  .title {
    font-size: 20px;
    color: #1a1a1a;
    text-decoration: underline;
  }
  .content {
    font-size: 15px;
    color: #1a1a1a;
  }
</style>
